<template>
	<view class="refund">
		<view class="od-line3">
			<view class="content-line1">
				<!-- 54 -->
				<image :src="orderInfo.shop_img" mode="aspectFill" class="order-icon" style="margin-right: 10upx;border-radius: 50%;"></image>
				<text class="line1-text2 font30">{{orderInfo.shop_name}}</text>
				<text class="iconfont">&#xe600;</text>
			</view>

			<view class="content-line2" @click="navTo('../detail/order-detail')">
				<view class="line1-text1">
					<image :src="orderInfo.product[0].pro_img" mode="aspectFill"></image>
				</view>
				<view class="line1-text2 font28">
					<view class="content-title">
						{{orderInfo.product[0].pro_name}}
					</view>
					<view class="price">
						<text class="font30">
							￥{{orderInfo.product[0].pro_price}}
						</text>
						</br>
						<text class="font24">
							×{{orderInfo.product[0].pro_pronum}}
						</text>
					</view>
					<view class="order-number">
						订单号:{{orderInfo.order_no}}
					</view>
				</view>

			</view>
			<view class="content-line3">
				<view class="line3-l font24" v-if="false">
					<text>提货日期:</text>
					<text class="font30">10.18</text>
				</view>
				<view class="line3-r">
					<text class="font24 ">
						共{{orderInfo.product[0].pro_pronum}}件商品
					</text>
					<text class="font24 padding13">
						合计：
					</text>
					<text class="font30 money">
						￥{{orderInfo.or_amount}}
					</text>
				</view>
			</view>
		</view>

		<view class="rf-box">
			<view class="rf-status">
				退款原因
			</view>
			<view class="theReason">
				<view class="reason-item" v-for="(item,index) in reasonList" :key="index">
					<text>{{item.value}}</text>
					<radio color="#ff557d" style="transform:scale(0.7)" @click="changeSelect(index)" :checked="index === current" />
				</view>
			</view>
			<view class="rf-status">
				退款金额 <text>￥{{orderInfo.or_amount}}</text>
			</view>
			<button type="primary" style="border-radius: 30upx;" class="tjsq" @click="commitRefund">提交申请</button>
		</view>
		<view>
			<s-dialog v-model="visible">
				<view class="visible-box">
					<view class="tipsContent">
						<text>您好，您的申请已经提交成功，</text>
						<text>我们将尽快进行处理，</text>
						<text>请耐心等待</text>
						<button class="tips-btn" type="default" style="color: $bg02;" @click="successful">确定</button>	
					</view>
				</view>
			</s-dialog>
		</view>
	</view>
</template>

<script>
	import sDialog from '@/components/s-dialog/index.vue'
	export default {
		
		components:{
			sDialog
		},
		data() {
			return {
				reasonList:[
					{value:'不喜欢/不想要',id:0},
					{value:'拍多不想要',id:1},
					{value:'未按约定时间发货',id:2},
					{value:'商家一直未送货上门',id:3},
					{value:'其他',id:4}
				],
				current:-1,
				content:'',
				orderInfo:{},
				visible:false,
				rfStatus: '0',
			};
		},
		onLoad(id) {
			let orId = JSON.parse(id.id)
			this.evaluation(orId)
		},
		methods: {
			changeSelect(index){
				this.reasonList.forEach((item,sub) =>{
					if(item.id == index){
						this.current = sub
						this.content = item.value
					}
				})
			},
			successful(){
				this.visible = false
				// uni.navigateBack()
				uni.navigateTo({
					url:'/pages/afterSale/afterSale'
				})
			},
			commitRefund(){
				this.commitRfundApply()
			},
			async commitRfundApply(){
				let res = await this.$http.setRefunds({
					type:1,
					order_id: this.orderInfo.orid,
					title:this.content,
					amount:this.orderInfo.or_amount
				})
				if(res.code == 200){
					this.visible = true
					uni.navigateTo({
						url:'/pages/order/user-order?id=1'
					})
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
			},
			async evaluation(orId){
				let res = await this.$http.evaluationOrder({
					order_id: orId
				});
				this.orderInfo = res.data
				console.log(this.orderInfo)
			},
			// 选择框的选定
			// onSelect(e) {
			// 	console.log(e)
			// 	this.rfStatus = e.target.value
			// },
			// 路由跳转
			navTo(url){
				uni.navigateTo({
					url
				});
			},
			// 添加图片
			addImg(){
				let _self = this
				if(this.imgList.length < 3) {
					uni.chooseImage({
						count: 3 - _self.imgList.length,
						sizeType: ['compressed'],
						sourceType: ['album'],
						success: (res) => {
							// this.imgList = res.tempFilePaths[0]
							uni.uploadFile({ //图片上传
								url: this.$common.baseUrl.setUploadImg, 
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {},
								success: (res) => {
									let img = JSON.parse(res.data)
									this.imgs.push(img.data.file)
									if(this.imgList.length<3){
										this.imgList.push(img.data.file)
									}else{
										this.imgList = []
										this.imgList.push(img.data.file)
										this.imgs = []
										this.imgs.push(img.data.file)
									}
									console.log(this.imgs)
								},
								fail: (e) => {
				
								}
							});
						}
					})
				} else {
					uni.showToast({
						title: '最多可添加三张',
						icon: 'none'
					});
				}
				
			},
			// 删除图片
			moveImg(e) {
				let index = e.currentTarget.id 
				this.imgList.splice(index,1)
			},
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/user-order.scss';
@import 'static/css/refund.scss';
@import 'static/css/smallCommon.scss';
.status{
	display: flex;
	justify-content: space-between;
}
.theReason{
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 10upx;
	.reason-item{
		padding: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
		color: #666666;
	}
}
.visible-box{
	background-color: #FFFFFF;
	height:350upx;
	width: 550upx;
	border-radius: 10upx;
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
	.tipsContent{
		margin-top: 50upx;
		width: 96%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&>text{
			line-height: 50upx;
		}
		.tips-btn{
			width: 190upx;
			height: 70upx;
			border-radius: 50upx;
			background-color:#FF557D;
			color: #FFFFFF;
			margin-top: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
